import * as React from 'react'
import { cn } from '@/lib/utils'

// 按钮变体类型定义
export type ButtonVariant = 
  | 'default'   // 默认
  | 'primary'   // 主要
  | 'secondary' // 次要
  | 'outline'   // 轮廓
  | 'ghost'     // 幽灵
  | 'danger'    // 危险
  | 'gradient'  // 渐变

// 按钮尺寸类型定义
export type ButtonSize = 
  | 'default' // 默认
  | 'sm'      // 小
  | 'lg'      // 大
  | 'icon'    // 图标

// 按钮属性接口
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant
  size?: ButtonSize
  isLoading?: boolean
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
  asChild?: boolean
  children?: React.ReactNode
}

// 按钮组件
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ 
    className, 
    variant = 'default', 
    size = 'default', 
    isLoading = false,
    leftIcon,
    rightIcon,
    asChild = false,
    disabled,
    children,
    ...props 
  }, ref) => {
    // 通过变体、尺寸、加载状态和禁用状态来确定按钮的样式
    const buttonClasses = cn(
      // 基础样式
      'inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors',
      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
      'disabled:pointer-events-none disabled:opacity-50',
      
      // 尺寸样式
      {
        'h-10 px-4 py-2 text-sm': size === 'default',
        'h-9 px-3 text-xs': size === 'sm',
        'h-11 px-8 text-base': size === 'lg',
        'h-10 w-10 p-0': size === 'icon',
      },
      
      // 变体样式
      {
        // 默认样式
        'bg-gray-100 text-gray-900 hover:bg-gray-200': variant === 'default',
        
        // 主要样式 - 使用CSS变量
        'bg-[var(--primary-color)] text-white hover:bg-[var(--primary-hover)]': variant === 'primary',
        
        // 次要样式 - 使用CSS变量
        'bg-[var(--primary-bg-light)] text-[var(--primary-text-dark)] hover:bg-[var(--primary-border)]': variant === 'secondary',
        
        // 轮廓样式 - 使用CSS变量
        'border border-[var(--primary-border)] bg-transparent text-[var(--primary-text-dark)] hover:bg-[var(--primary-bg-light)]': variant === 'outline',
        
        // 幽灵样式
        'bg-transparent text-gray-800 hover:bg-gray-100': variant === 'ghost',
        
        // 危险样式
        'bg-red-500 text-white hover:bg-red-600': variant === 'danger',
        
        // 渐变样式 - 使用CSS变量
        'bg-[var(--primary-gradient)] text-white hover:opacity-90': variant === 'gradient',
      },
      
      // 加载和禁用状态
      {
        'cursor-not-allowed opacity-60': isLoading,
      },
      
      // 自定义类名
      className
    )
    
    // 修复: 不再使用React.Fragment作为asChild的处理方式
    // 而是直接返回按钮元素，保持ref的正确传递
    return (
      <button
        className={buttonClasses}
        ref={ref}
        disabled={disabled || isLoading}
        {...props}
      >
        {/* 左侧图标 */}
        {leftIcon && !isLoading && (
          <span className="mr-2">{leftIcon}</span>
        )}
        
        {/* 加载状态显示加载指示器 */}
        {isLoading && (
          <svg 
            className="mr-2 h-4 w-4 animate-spin" 
            xmlns="http://www.w3.org/2000/svg" 
            fill="none" 
            viewBox="0 0 24 24"
          >
            <circle 
              className="opacity-25" 
              cx="12" 
              cy="12" 
              r="10" 
              stroke="currentColor" 
              strokeWidth="4"
            />
            <path 
              className="opacity-75" 
              fill="currentColor" 
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            />
          </svg>
        )}
        
        {/* 按钮内容 */}
        {children}
        
        {/* 右侧图标 */}
        {rightIcon && !isLoading && (
          <span className="ml-2">{rightIcon}</span>
        )}
      </button>
    )
  }
)

Button.displayName = 'Button'

export { Button } 